<template>
    <div class="userfile-container">
      <!-- 顶部导航 -->
      <van-nav-bar
        title="个人信息"
        left-arrow
        class="page-nav-bar"
        @click-left="$router.back()"
      />

      <!-- 上传控件 -->
      <input type="file" hidden ref="file" @change="onFileChange">

      <!-- 内容区域 -->
      <van-cell title="头像" is-link class="photo-cell" @click="$refs.file.click()">
        <template #default>
          <van-image
            class="avatar"
            round
            fit="cover"
            :src="userInfo.photo"
          />
        </template>
      </van-cell>
      <van-cell title="昵称" is-link :value="userInfo.name" @click="isNameShow = true"/>
      <van-cell title="性别" is-link :value="userInfo.gender === 0 ? '男' : '女'" @click="isGenderShow = true"/>
      <van-cell title="生日" is-link :value="userInfo.birthday" @click="isBirthdayShow = true"/>

      <!-- 头像弹框 -->
      <van-popup v-model="isPhotoShow" position="bottom" :style="{ height: '100%' }">
        <avatar-edit v-if="isPhotoShow" :img="img" @close="isPhotoShow = false" :avatar.sync="userInfo.photo"></avatar-edit>
      </van-popup>

      <!-- 昵称弹框 -->
      <van-popup v-model="isNameShow" position="bottom" style="height: 100%; background-color: #eee;">
        <username-edit v-if="isNameShow" @close="isNameShow = false" :name.sync="userInfo.name"></username-edit>
      </van-popup>

      <!-- 性别弹框 -->
      <van-popup v-model="isGenderShow" position="bottom">
        <gender-edit v-if="isGenderShow" @close="isGenderShow = false" :gender.sync="userInfo.gender"></gender-edit>
      </van-popup>

      <!-- 生日弹框 -->
      <van-popup v-model="isBirthdayShow" position="bottom">
        <birthday-edit v-if="isBirthdayShow" @close="isBirthdayShow = false" :birthday.sync="userInfo.birthday"></birthday-edit>
      </van-popup>
    </div>
  </template>

<script>
/*
    目标1： 头像上传
        1. 点击单元格，触发上传图片功能
        2. 选择上传图片后，自动开启全屏弹框，展示图片
*/
/*
    目标2： 图片剪裁
        1. 使用cropper插件工具来实现剪裁，最后会得到图片的blob数据格式
        2. 当点击确定时，将blob通过FormData进行装载发送给后端，后端会返回一个图片地址
        3. 关闭弹框并有前端更新新的头像图片
*/
/*
  自主练习需求：
  需求1： 昵称编辑
  1. 点击昵称单元格，打开编辑弹框（顶部导航，多行文本van-field 显示字数统计）
  2. 文本框中默认显示当前昵称
  3. 点击取消关闭弹框，昵称不改变
  4. 点击确定提交修改昵称请求，关闭弹框，昵称改变
  5. 再次打开弹框确认是否为新的默认昵称

  需求2： 性别编辑 （要阅读ui文档）
  1. 点击性别单元格，打开编辑弹框 （van-picker选择器插件来实现）
  2. 注意事项： 性别为数字，而显示咋以页面上的是字符串，所以注意改变
  3. 点击取消关闭弹框，性别不改变
  4. 点击确定提交修改性别请求，关闭弹框，性别改变
  5. 再次打开弹框确认是否为新的默认性别

  需求3：生日编辑 （要阅读ui文档）
  1. 点击生日单元格，打开编辑弹框 （van-datetime-picker)
  2. 注意事项：我们的生日数据 YYYY-MM-DD格式的字符串，ui组件可能用的是Date数据，注意转化
  3. 点击取消关闭弹框，生日不改变
  4. 点击确定提交修改生日请求，关闭弹框，生日改变
  5. 再次打开弹框确认是否为新的默认生日
*/
import { getUserProfileAPI } from '../../api/index.js'
import AvatarEdit from './component/avatar-edit.vue'
import UsernameEdit from './component/username-edit.vue'
import GenderEdit from './component/gender-edit.vue'
import BirthdayEdit from './component/birthday-edit.vue'
export default {
  name: 'UserfileIndex',
  components: {
    AvatarEdit,
    UsernameEdit,
    GenderEdit,
    BirthdayEdit
  },
  data () {
    return {
      userInfo: {},
      img: null,
      isPhotoShow: false, // 头像弹框状态
      isNameShow: false, // 昵称弹框状态
      isGenderShow: false, // 性别弹框状态
      isBirthdayShow: false // 生日弹框状态
    }
  },
  created () {
    // 调用获取个人资料的方法
    this.loadGetUserProfile()
  },
  methods: {
    // 上传图片完成后
    onFileChange () {
      // 1.获取文件对象
      const file = this.$refs.file.files[0]
      // 2.基于文件对象转化成blob数据
      this.img = window.URL.createObjectURL(file)
      // 3.每次获取完成图片后都要清空文件上传框中的数据
      this.$refs.file.value = ''

      // 开启弹窗
      this.isPhotoShow = true
    },
    async loadGetUserProfile () {
      try {
        const { data: res } = await getUserProfileAPI()
        console.log(res)
        this.userInfo = res.data
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

  <style scoped lang="less">
  .userfile-container {
    .photo-cell {
      align-items: center;

      .avatar {
        width: 30px;
        height: 30px;
      }

      .van-cell__value {
        display: flex;
        flex-direction: row-reverse;
      }
    }
  }
  </style>
